<template>
  <div class="notifications">
    <h2>消息通知</h2>
    <el-divider></el-divider>

    <!-- 未读消息 -->
    <h3>未读消息</h3>
    <el-collapse>
      <el-collapse-item v-for="message in sortedUnreadMessages" :key="message.id" :title="message.title">
        <div>
          <p>{{ message.content }}</p>
          <span style="color: grey; font-size: 12px;">{{ message.time }}</span>
        </div>
        <div style="margin-top: 10px;">
          <el-button type="primary" @click="markAsRead(message)">标记为已读</el-button>
        </div>
      </el-collapse-item>
    </el-collapse>

    <el-divider></el-divider>

    <!-- 已读消息 -->
    <h3>历史消息</h3>
    <el-collapse>
      <el-collapse-item v-for="message in sortedReadMessages" :key="message.id" :title="message.title">
        <div>
          <p>{{ message.content }}</p>
          <span style="color: grey; font-size: 12px;">{{ message.time }}</span>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'SkyNotifications',
  data() {
    return {
      messages: [
        {id: 1, title: "系统通知", content: "这是一个系统通知内容", time: "2024-10-23 12:01", read: false},
        {id: 2, title: "更新提醒", content: "新版本已发布，请及时更新", time: "2024-10-23 11:50", read: false},
        {id: 3, title: "账户提醒", content: "你的账户密码将在7天后过期", time: "2024-10-22 15:30", read: true}
      ]
    };
  },
  computed: {
    // 已读消息按照时间倒序排序
    sortedReadMessages() {
      return this.messages
          .filter(message => message.read)
          .sort((a, b) => new Date(b.time) - new Date(a.time));
    },
    // 未读消息按照时间倒序排序
    sortedUnreadMessages() {
      return this.messages
          .filter(message => !message.read)
          .sort((a, b) => new Date(b.time) - new Date(a.time));
    },
  },
  methods: {
    markAsRead(message) {
      message.read = true; // 标记为已读
    }
  }
};
</script>

<style scoped>
.notifications {
  padding: 20px;
}
</style>
